<template>
 <view class="conten">
   <!-- <top-tabbar tabTitle="我的收益" backColor="#ffffff" :titleStatus="true" @click="clickBack"></top-tabbar> -->
   <!-- 头部个人信息 -->
   <view class="header-info">
     <view class="info">
       <view class="img-name">
         <view class="img-box"><image style="border-radius: 50%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F23%2F20200723090549_wdhgx.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638170985&t=0a2ebc277392b556cf9891ab866caf9e"></image></view>
         <view class="name">星星有泪</view>
       </view>
       <view class="go-withdraw" @click="goDeposit">
         <view class="withdraw-img"><image style="display: block;" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/order/Profit_withdrawal.png"></image></view>
         <view>去提现</view>
       </view>  
     </view>
     <view class="my-profit">
       <view class="num-text">
         <view><text class="numbers">0</text><text>人</text></view>
         <view class="invitees-num">邀请人数</view>
       </view>
       <view class="profut-Line"></view>
       <view class="num-text">
         <view><text class="numbers">0</text><text class="money">元</text></view>
         <view class="invitees-num">已到账</view>
       </view>
       <view class="profut-Line"></view>
       <view class="num-text">
         <view><text class="numbers">0</text><text>元</text></view>
         <view class="invitees-num" style="display:flex;align-items:center;">
          <view>即将到账</view>
          <view class="iconfont" @click="onceInto" style="margin-left:8rpx">&#xe689;</view> 
         </view>
       </view>
     </view>
   </view>
   <view class="tab-control">
     <ms-tabs class="tabs-mzy" :list="tabList" v-model="tebActive" itemColor='#262626' lineColor='#FF800C'
     	@input="handleChange" />
   </view> 
   <!-- 主体内容 -->
   <view class="main">
    <!-- 列表 -->
    <view class="course-list">
        <view class="name-price-time" v-for="(item,index) in courseList" :key="item.id">
          <view class="item-img-name">
            <view class="head-portrait"><image style="border-radius: 50%;" :src="item.imgUrl"></image></view>
            <view>{{ item.name }}</view>
          </view>
          <view class="price-time">
            <view class="price">+{{ item.price }}</view>
            <view class="time">{{ item.time }}</view>
          </view>
        </view>
    </view>
    <!-- 弹窗 -->
    <logding ref="sizereap"></logding>
   </view>
  </view>
</template>

<script>
  import topTabbar from '@/components/topTabbar/index.vue'
  import logding from '../invitation/loding.vue'
  export default{
    components:{ topTabbar, logding },
    data() {
      return{
        tebActive: 0,
        courseList: [
          { id: 1, name: '星星有泪', price: 238, time: "2021/10/25 15:58", imgUrl: 'https://img0.baidu.com/it/u=2565446153,3452772677&fm=26&fmt=auto'},
          { id: 2, name: '随风起舞', price: 198, time: "2021/10/21 10:15", imgUrl: 'https://img0.baidu.com/it/u=2781444206,376051373&fm=26&fmt=auto'},
          { id: 3, name: '不闻不问', price: 198, time: "2021/10/21 10:15", imgUrl: 'https://img0.baidu.com/it/u=3870515480,2471774367&fm=26&fmt=auto'},
          { id: 4, name: '永恒之夜', price: 198, time: "2021/10/21 10:15", imgUrl: 'https://img2.baidu.com/it/u=167961362,4124169709&fm=26&fmt=auto'},
          { id: 5, name: '逆天而行', price: 198, time: "2021/10/21 10:15", imgUrl: 'https://img1.baidu.com/it/u=1244085774,1941804970&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'}
        ],
        tabList: [
          { id: 1, num: 117, title: '全部'},
          { id: 2, num: 97, title: '系统课'},
          { id: 3, num: 5, title: '体验课'},
          { id: 3, num: 5, title: '已退费'}
        ]
      }
    },
    onLoad() {
       this.$wechat.unseBehavior()
    },
    methods:{
      // 提现提示
      goDeposit() {
        this.$refs.sizereap.cremreflex()
      },
      // 即将到账提示弹窗
      onceInto() {
        this.$refs.sizereap.systemNews()
      },
      // tab切换
      tabClick(index) {
        this.tabIndex = index
      },
      // 返回上一页
      clickBack() {
        uni.navigateBack({})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .conten{
    .header-info{
      width: 670rpx;
      // height: 350rpx;
     background: linear-gradient(105.06deg, #FEC56B 0%, #FF800C 100%);
     box-shadow: 0px 8rpx 30rpx rgba(0, 0, 0, 0.08);
     border-radius: 40rpx;
      margin: auto;
      margin-top: 16rpx;
      padding: 32rpx;
      .info{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .img-name{
          display: flex;
          align-items: center;
          .img-box{
            width: 128rpx;
            height: 128rpx;
            border-radius: 50%;
          }
          .name{
            width: 300rpx;
            color: #FFFFFF;
            margin-left: 20rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .go-withdraw{
          display: flex;
          align-items: center;
          width: 176rpx;
          height: 48rpx;
          background: rgba(0,0,0,0.1);
          border-radius: 24rpx;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          .withdraw-img{
            width: 28rpx;
            height: 24rpx;
            margin-right: 12rpx;
          }
        }
      }
      .my-profit{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        margin: 20rpx 0 0rpx 0;
        color: #FFFFFF;
        background: rgba(255, 255, 255, 0.3);
        padding: 50rpx 0;
        border-radius: 30rpx;
        .num-text{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .numbers{
            font-size: 48rpx;
            font-weight: bold;
            margin-right: 10rpx;
          }
          .money{
            font-size: 28rpx;
            font-weight: bold;
          }
          .invitees-num{
            margin-top: 8rpx;
          }
        }
        .profut-Line{
          width: 2rpx;
          height: 48rpx;
          background: rgba(255, 255, 255, 0.4);
          margin: 0 40rpx;
        }
      }
    }
    // 选项卡
    .tab-control{
      width: 100%;
      padding-top: 64rpx;
      // height: 120rpx;
      display: flex;
      align-items: center;
      // padding: 20rpx 0;
      background: #FFFFFF;
      border-bottom:  2rpx solid #EEEEEE;
      border-radius: 30rpx 30rpx 0 0;
       /deep/.tabBlock{
         margin: auto;
       }
      /deep/.tabBlock .tab__item-title {
      	margin: 0 36rpx;
      }
      /deep/ .tabBlock .tab__item{
        font-size: 28rpx;
        color: #8C8C8C;
      }
      /deep/ .tabBlock .tab__item--active{
        font-size: 28rpx;
        font-weight: bold;
        color: #262626 !important;
      }
      /deep/ .tab__line{
        width: 35rpx !important;
        height: 8rpx;
        border-radius: 4rpx;
      }
    }
    .main{
      padding: 0 40rpx 100rpx 40rpx;
      .course-list{
        .name-price-time:last-child{
           border-bottom: none;
        }
          .name-price-time{
            width: 100%;
            height: 148rpx;
            border-bottom: 2rpx solid #EEEEEE;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10rpx;
            .item-img-name{
              display: flex;
              align-items: center;
              .head-portrait{
                width: 96rpx;
                height: 96rpx;
                margin-right: 16rpx;
              }
            }
            .price-time{
              text-align: right;
              .price{
                font-size: 24rpx;
                color: #FF800C;
                font-weight: bold;
              }
              .time{
                font-size: 20rpx;
                color: #8c8c8c;
              }
            }
          }
      }
    }
  }
</style>
